<template>
  <div style="width: 100%;height: 350px; overflow:auto;">
    <el-table :data="list"
              style="width: 100%;padding-top: 0px;background-color: #1B4685"
              :row-class-name="tableRowClassName"
              height="326"
              :default-sort = "{prop: 'time', order: 'descending'}">
      <el-table-column label="车牌号" align="center" width="100">
        <template slot-scope="scope">
          {{scope.row.plateNo}}
        </template>
      </el-table-column>
      <el-table-column label="停车场" align="center" width="100">
        <template slot-scope="scope">
          {{scope.row.parkName}}
        </template>
      </el-table-column>
      <el-table-column label="入场时间" align="center">
        <template slot-scope="scope">
          {{scope.row.parkInTime}}
        </template>
      </el-table-column>
      <el-table-column prop="time" label="停车时长"  align="center" sortable>
        <template slot-scope="scope">
          {{scope.row.timeStr}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import ElTag from '../../../../node_modules/element-ui/packages/tag/src/tag'
  import ElRow from 'element-ui/packages/row/src/row'

  export default {
    components: { ElRow, ElTag }, data() {
      return {
        list: []
      }
    },
    props: [
      'dataList'
    ],
    watch: {
      dataList(val) {
        this.list = val
      }
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          success: 'success',
          pending: 'danger'
        }
        return statusMap[status]
      }
    },
    created() {
    },
    methods: {
      handleClick(val) {
        console.log(val)
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 0) {
          return 'one-row';
        } else {
          return '';
        }
      }
    }
  }
</script>
